<template>
  <div>
    <el-card>
      <img :src="routelist.imageUrl || '占位图路径'" style="width: 100%; height: auto;">
      <h2 style="margin-top: 10px;">{{ routelist.name }}</h2>
      <p>价格：{{ routelist.price }} 元</p>
      <p>描述：{{ routelist.description }}</p>
      <el-button type="primary" @click="placeOrder">立即预定</el-button>
    </el-card>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearform">
      <el-form ref="orderFromRef" :model="orderForm" :rules="rules">
        <el-form-item label="用户Id" prop="userId" :label-width="formLabelWidth">
          <el-input v-model="this.$store.state.user.userId" readonly="true" autocomplete="off" />
        </el-form-item>

        <el-form-item label="预定时间" prop="scheduledtime" :label-width="formLabelWidth">
          <div class="block">
            <span class="demonstration" />
            <el-date-picker v-model="orderForm.scheduledtime" type="datetime" placeholder="选择日期时间" />
          </div>
        </el-form-item>
        <el-form-item label="下单时间" prop="orderDate" :label-width="formLabelWidth">
          <template>
            <div class="block">
              <span class="demonstration" />
              <el-date-picker
                v-model="orderForm.orderDate"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              />
            </div>
          </template>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input v-model="options1value" readonly="true" autocomplete="off" />
        </el-form-item>
        <el-form-item label="对应类型id" prop="orderSetId" :label-width="formLabelWidth">
          <el-input v-model="routelist.routelistId" readonly="true" autocomplete="off" />
        </el-form-item>
        <el-form-item label="订单类型" :label-width="formLabelWidth">
          <el-input v-model="options2value" readonly="true" autocomplete="off" />
        </el-form-item>

        <el-form-item label="支付金额（元）" :label-width="formLabelWidth">
          <el-input v-model="routelist.price" readonly="true" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import orderApi from '@/api/OrderManage'

export default {
  data() {
    return {
      routelist: {
        imageUrl: '',
        name: '',
        price: 0,
        description: '',
        routelistId: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      options1value: '已下单',
      options2value: '景点路线预定订单',
      formLabelWidth: '130px',
      orderForm: {},
      dialogFormVisible: false,
      title: '用户下单',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      orderDetailsList: [],
      rules: {}
    }
  },
  created() {
    // 传参
    this.processRouteParams()
  },
  methods: {
    saveOrder() {
      // 触发表单验证
      this.$refs.orderFromRef.validate((valid) => {
        this.orderForm.userId = this.$store.state.user.userId,
        this.orderForm.status = this.options1value,
        this.orderForm.orderType = this.options2value,
        this.orderForm.routelistId = this.routelist.routelistId,
        this.orderForm.totalPrice = this.routelist.price
        console.log(this.orderForm)
        if (valid) {
          // 提交请求到后台
          orderApi.saveOrder(this.orderForm).then(response => {
            // 成功提交的提示
            this.$message({
              message: response.message,
              type: 'success'
            })
            // 关闭对话框
            this.dialogFormVisible = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清除表单报错信息
    clearform() {
      this.orderForm = {}
      this.$refs.orderFromRef.clearValidate()
    },
    processRouteParams() {
      const imageUrl = this.$route.params.imageUrl || '默认图片路径'
      const name = this.$route.params.name || ''
      const price = this.$route.params.price || 0
      const description = this.$route.params.description || ''
      const routelistId = this.$route.params.id || ''

      this.routelist = { imageUrl, name, price, description, routelistId }
      // console.log(this.routelist) // 确保数据被正确设置
    },
    placeOrder() {
      // 下单处理逻辑
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
/* 样式可根据需求自行添加 */
.el-dialog .el-input {
  width: 200px;

}
</style>
